<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .container {
            background-color: gray;
            position: relative;
            width: 200px;
            height: 200px;
            font-weight: bolder;
        }

        .mc1 {
            color: red;
            background-color: lightpink;
            /* width: 160px; */
            /* height: 160px; */
            width: 80px;
            height: 80px;
            position: absolute;
            left: 20px;
            top: 20px;
        }

        .mc2 {
            color: blue;
            background-color: lightgreen;
            /* width: 120px; */
            /* height: 120px; */
            width: 80px;
            height: 80px;
            position: absolute;
            left: 40px;
            top: 40px;
        }

        .mc3 {
            color: green;
            background-color: greenyellow;
            width: 80px;
            height: 80px;
            position: absolute;
            left: 60px;
            top: 60px;
        }
    </style>

    <style>
        .wrapper {
            position: relative;
        }

        .dashed-box {
            position: relative;
            z-index: 1;
            border: dashed;
            height: 8em;
            margin-bottom: 1em;
            margin-top: 2em;
        }

        .gold-box {
            position: absolute;
            z-index: 3;
            /* put .gold-box above .green-box and .dashed-box */
            background: gold;
            width: 80%;
            left: 60px;
            top: 3em;
        }

        .green-box {
            position: absolute;
            z-index: 2;
            /* put .green-box above .dashed-box */
            background: lightgreen;
            width: 20%;
            left: 65%;
            top: -25px;
            height: 7em;
            opacity: 0.9;
        }
    </style>
</head>

<body>

    <p>z-index</p>
    <div class="container">
        <div class="mc1" style="z-index: 1;">
            z-index: 1
        </div>
        <div class="mc2" style="z-index: 2;">
            z-index: 2
        </div>
        <div class="mc3" style="z-index: 3;">
            z-index: 3
        </div>
    </div>

    <div class="wrapper">
        <div class="dashed-box">Dashed box</div>
        <div class="gold-box">Gold box</div>
        <div class="green-box">Green box</div>
    </div>


</body>

</html>

<!-- CSS 布局 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout -->

<!-- 介绍 top, bottom, left,  right -->
<!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Positioning#introducing_top_bottom_left_and_right -->
<!-- top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置。 -->
<!-- top -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/top -->
<!-- top样式属性定义了定位元素的上外边距边界与其包含块上边界之间的偏移，非定位元素设置此属性无效。 -->
<!-- bottom -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/bottom -->
<!-- bottom样式属性定义了定位元素下外边距边界与其包含块下边界之间的偏移，非定位元素设置此属性无效。 -->
<!-- left -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/left -->
<!-- CSS left属性定义了定位元素的左外边距边界与其包含块左边界之间的偏移，非定位元素设置此属性无效。 -->
<!-- right -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/right -->
<!-- right样式属性定义了定位元素的右外边距边界与其包含块右边界之间的偏移，非定位元素设置此属性无效。 -->

<!-- 介绍 z-index -->
<!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Positioning#introducing_z-index -->
<!-- “z-index”是对z轴的参考。 -->
<!-- 网页也有一个z轴：一条从屏幕表面到你的脸（或者在屏幕前面你喜欢的任何其他东西）的虚线。z-index 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0。 -->
<!-- z-index -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/z-index -->
<!-- z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。 当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。 -->